<template>
    <div>
        <h3>新增菜谱</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">菜谱标题</td>
                    <td><input type="text" v-model="info.Title"></td>
                </tr>
                <tr>
                    <td align="right">菜谱封面</td>
                    <td>
                        <input type="file" @change="img" >
                        <img :src="info.Fimg" width="60" height="60" v-if="info.Fimg!=''">
                    </td>
                </tr>
                <tr>
                    <td align="right">标签</td>
                    <td><input type="text" v-model="info.Ftag"></td>
                </tr>
                <tr>
                    <td align="right">分类</td>
                    <td><select v-model="info.Cid">
                            <option value="">请选择</option>
                            <option :value="i.Cid" v-for="i in list">{{ i.Cname }}</option>
                        </select></td>
                </tr>
                <tr>
                    <td align="right">发布状态</td>
                    <td>
                        <input type="radio" name="state" v-model="info.State" value="true">已发布
                        <input type="radio" name="state" v-model="info.State" value="false">未发布
                    </td>
                </tr>
                <tr>
                    <td align="right">发布时间</td>
                    <td><input type="date" v-model="info.Ftime"></td>
                </tr>
                <tr>
                    <td align="right">菜谱详情</td>
                    <td><textarea rows="5" cols="25" v-model="info.Detail"></textarea></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="button" value="确认" class="btn btn-success" @click="add"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute();
const routr = useRouter();

//上传图片
const img=(e:any)=>{
    var obj=e.target.files[0];
    var f = new FormData();
    f.append("file",obj);
    axios({
        url:"/api/Food/IMG",
        method:"post",
        data:f
    })
    .then(res=>{
        info.Fimg=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}


onMounted(()=>{
    getclass();
})

//分类下拉框
let list:any=ref([]);
const getclass=()=>{
    axios({
        url:"/api/Food/GetClass",
        method:"get",
    })
    .then(res=>{
        list.value=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

//添加
let info: any = reactive({
    "Title": "",
    "Fimg": "",
    "Ftag": "",
    "Cid": "",
    "Ftime": "",
    "Detail": "",
    "State": true,
})
const add=()=>{
    if(info.Title==""){
        alert("菜谱标题不能为空");
        return;
    }
    if(info.Fimg==""){
        alert("菜谱封面不能为空");
        return;
    }
    if(info.Ftag==""){
        alert("标签不能为空");
        return;
    }
    if(info.Cid==""){
        alert("分类不能为空");
        return;
    }
    if(info.Detail==""){
        alert("菜谱详情不能为空");
        return;
    }
    axios({
        url:"/api/Food/AddFood",
        method:"post",
        data:info
    })
    .then(res=>{
        if(res.data==-1){
            alert("菜谱标题重复");
            return;
        }else if(res.data>0){
            alert("添加成功");
            routr.push("/foodList")
        }else{
            alert("添加失败");
            return;
        }
    })
    .catch(err=>{
        console.log(err);
    })
}


</script>

<style scoped></style>